<template>
	<view class="storeBox">
		<view class="top" @click="goToBack">
			<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode=""></image>
			<view class="">{{storeInfo.storeName}}</view>
		</view>
		<view class="warn">统计订单时间：{{storeInfo.orderStatisticsTimeBegin}}-{{storeInfo.orderStatisticsTimeEnd}}</view>
		<view class="notice">
			<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/laba.png" mode=""></image>
			<view class="">{{storeInfo.merchantAnnouncement}}</view>
		</view>
		<view class="menuContent">
			<view class="menuList menuTop">
				<view class="">菜单列表</view>
				<view class="">当前单量</view>
			</view>
			<view class="menuList" v-for="(item,index) in storeInfo.hcOrderDetailedList" :key="index">
				<view class="">{{item.tradeName}}</view>
				<view class="">{{item.commodityQuantity}}份</view>
			</view>
			<view class="total">总订单量: <text>{{storeInfo.orderTotal}}份</text></view>
		</view>
		<view class="storeState">
			<view class="title">{{storeInfo.storeName}}门店出餐状态:<text
					:class="{'error':storeInfo.storeStatus=='未接单','ing':storeInfo.storeStatus=='出餐中','success':storeInfo.storeStatus=='已出餐'}">{{storeInfo.storeStatus}}</text>
			</view>

			<view class="" @click="handleExportXls">
				导出
			</view>
		</view>
		<view class="orderContent">
			<view class="tableBox" v-if="orderList.length!=0">
				<view class="table" :style="{'width':trWidthTotal+'rpx'}">
					<view class="tr">
						<view class="td" :style="{'width':trWidthArr[0]+'rpx'}">地址</view>
						<view class="td" :style="{'width':trWidthArr[1]+'rpx'}">序号</view>
						<view class="td" :style="{'width':trWidthArr[2]+'rpx'}">姓名</view>
						<view class="td" :style="{'width':trWidthArr[3]+'rpx'}">菜品</view>
						<view class="td" :style="{'width':trWidthArr[4]+'rpx'}">备注</view>
						<view class="td">付款时间</view>
					</view>
					<view class="tr" v-for="(item,index) in orderList" :key="index">
						<view class="td" :style="{'width':trWidthArr[0]+'rpx'}">{{item.supplyAddress}}</view>
						<view class="td" :style="{'width':trWidthArr[1]+'rpx'}">{{item.pickingSerialNo}}</view>
						<view class="td" :style="{'width':trWidthArr[2]+'rpx'}">{{item.nameTakingMeal}}</view>
						<view class="td" :style="{'width':trWidthArr[3]+'rpx'}"><text
								v-for="(foodItem,foodIndex) in item.hcOrderDetailedList"
								:key="foodIndex"><text>{{foodItem.tradeName}}<text v-if="foodItem.specifications">({{foodItem.specifications}})</text></text>
								<text
									:class="{'error':foodItem.commodityQuantity>1}">x{{foodItem.commodityQuantity}}</text>
								<text v-if="foodIndex!=item.hcOrderDetailedList.length-1">,</text></text></view>
						<view class="td" :style="{'width':trWidthArr[4]+'rpx'}">{{item.remarks?item.remarks:'无'}}</view>
						<view class="td">{{item.createTime}}</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无订单数据" mode="page" v-if="orderList.length==0"></u-empty>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getStoreSystemInfo,
		getStoreGoodList,
		exportExcelById,
		getGlobalMerchantOrderDetailsList,
		changeStoreState,
		getMenuListWithNum,
		getOrderWithCompany,
	} from '@/utils/req/api.js'
	export default {
		data() {
			return {
				storeInfo: '',

				allChecked: false,
				checked: false,
				orderList: [],
				pageNo: 1,
				pageSize: 9999,
				moreOrderFlag: false,
				ids: [],

				merchantId: '',

				trWidthArr: [2, 2, 2, 2, 2],
				trWidthTotal: '',
			}
		},
		onLoad(options) {
			let {
				merchantId,
				companyId,
			} = options;
			this.merchantId = merchantId;
			this.companyId = companyId;
		},
		onShow() {
			this.getStoreSystemInfo()
			this.getStoreGoodList();
			this.trWidthArr = [2, 2, 2, 2, 2];
			this.trWidthTotal = 0;
		},
		methods: {
			goToBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//获取商家的相关信息
			async getStoreSystemInfo() {
				let res;
				if (this.companyId) {
					res = await getMenuListWithNum({
						merchantId: this.merchantId,
						companyId: this.companyId,
					});
					this.storeInfo = res.data.result;
					
					try{
						// 为了获取营业时间
						let infoRes = await getStoreSystemInfo({
							merchantId: this.merchantId,
							pageNo: 1,
							pageSize: this.pageNo * this.pageSize
						});
						this.storeInfo.orderStatisticsTimeBegin = infoRes.data.result.orderStatisticsTimeBegin
						this.storeInfo.orderStatisticsTimeEnd = infoRes.data.result.orderStatisticsTimeEnd
					}catch(e){
						console.error(e);
					}
				} else {
					res = await getStoreSystemInfo({
						merchantId: this.merchantId,
						pageNo: 1,
						pageSize: this.pageNo * this.pageSize
					});
					this.storeInfo = res.data.result;
					
				}
				
				let total = 0;
				this.storeInfo.hcOrderDetailedList.forEach(item => {
					total = item.commodityQuantity + total;
				})
				this.storeInfo.orderTotal = total;
			},
			//获取商家订单信息
			async getStoreGoodList(type) {
				let res;
				if (this.companyId) {
					res = await getOrderWithCompany({
						pageNo: 1,
						pageSize: this.pageNo * this.pageSize,
						merchantId: this.merchantId,
						companyId: this.companyId,
					});
					this.orderList = res.data.result.records || [];
				} else {
					res = await getStoreGoodList({
						// current: 1,
						// size: this.pageNo * this.pageSize,
						pageNo: 1,
						pageSize: this.pageNo * this.pageSize,
						merchantId: this.merchantId
					})
					if (type != 'push') {
						this.orderList = res.data.result.records;
					} else {
						this.orderList = [...this.orderList, ...res.data.result.records]
					}
				}
				// console.log(res,'111111111111')

				this.orderList.forEach(item => {
					item.checked = false;
					item.createTime = item.createTime.split(' ')[1]
					if (item.supplyAddress&&item.supplyAddress.length > this.trWidthArr[0]) {
						this.trWidthArr[0] = item.supplyAddress.length
					}
					if (item.pickingSerialNo&&item.pickingSerialNo.length > this.trWidthArr[1]) {
						this.trWidthArr[1] = item.pickingSerialNo.length
					}
					if (item.nameTakingMeal&&item.nameTakingMeal.length > this.trWidthArr[2]) {
						this.trWidthArr[2] = item.nameTakingMeal.length
					}
					if (item.nameDishes&&item.nameDishes.length > this.trWidthArr[3]) {
						this.trWidthArr[3] = item.nameDishes.length
					}
					if (item.remarks&&item.remarks.length > this.trWidthArr[4]) {
						this.trWidthArr[4] = item.remarks.length
					}
					// if (item.createTime.length > this.trWidthArr[5]) {
					// 	this.trWidthArr[5] = item.createTime.length
					// }
				})
				let trWidthTotal = 0;
				this.trWidthArr.forEach((item, index) => {
					this.$set(this.trWidthArr, index, item * 28 + 50)
					trWidthTotal = trWidthTotal + (item * 28 + 50) + 20;
				})
				console.log(this.trWidthArr);
				this.trWidthTotal = trWidthTotal + 200;
			},
			//全选
			changeAllCheck() {
				this.allChecked = !this.allChecked;
				let ids = [];
				this.orderList.forEach(item => {
					item.checked = this.allChecked;
					if (this.allChecked) {
						ids.push(item.id)
					}
				});
				this.ids = ids;
			},
			//单选
			changeRadioState(index) {
				console.log(6666);
				let obj = JSON.parse(JSON.stringify(this.orderList[index]));
				obj.checked = !obj.checked;
				this.$set(this.orderList, index, obj)

				let ids = [];
				this.orderList.forEach(item => {
					if (item.checked) {
						ids.push(item.id)
					}
				});
				this.ids = ids;
				if (ids.length == this.orderList.length) {
					this.allChecked = true;
				}
			},
			//导出
			async handleExportXls() {
				uni.navigateTo({
					url: '/pages/export/export?merchantId=' + this.merchantId + '&token=' + uni.getStorageSync(
						'token')+'&storeName='+this.storeInfo.storeName
				})
			},
			async changeStoreState(type) {
				let obj = {
					storeStatus: type == 'accept' ? '出餐中' : '已出餐'
				}
				let res = await changeStoreState(obj);
				if (res.data.success) {
					this.storeInfo.storeStatus = res.data.result.storeStatus;
				} else {
					this.$showToast.call(this, res.data.message, 'warning');
				}
			},
			//跳转公用函数
			goToPage(type) {
				let url;
				switch (type) {
					case "store":
						url = '/pages/index/index';
						break;
					case "afterSales":
						url = '/pages/index/afterOrder';
						break;
				}
				uni.navigateTo({
					url
				})
			},
			
			// 营业时间数据
			setBusinessHours() {
				let hours = this.storeInfo.businessHours;
				hours = JSON.parse(hours);
				let str = '';
				let list = [];
				let endTimeList = [];
				hours.forEach(val => {
					if (val.startTime) {
						endTimeList.push(val.endTime);
						str += '，' + val.startTime + '-' + val.endTime;
						if (val.startTime > val.endTime) {
							list.push([val.startTime + ':00', '23:59:59']);
							list.push(['00:00:00', val.endTime + ':59']);
						} else {
							list.push([val.startTime + ':00', val.endTime + ':59']);
						}
					}
				})
				this.businessHoursStr = str.replace('，', '');
				this.businessHours = list;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #F5F5F5;
		padding-bottom: 150rpx;
		min-height: 100vh;
	}

	.top {
		background-color: #fff;
		text-align: center;
		padding: 30rpx 0;
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 2;

		image {
			width: 30rpx;
			height: 30rpx;
			transform: rotate(90deg);
			position: absolute;
			left: 40rpx;
			top: calc((100% - 30rpx) / 2);
		}
	}

	.warn {
		background-color: #F6E2D4;
		color: #FA690A;
		font-size: 28rpx;
		line-height: 2;
		padding: 10rpx 60rpx;
	}

	.notice {
		@include flex(flex-start, flex-start);
		padding: 40rpx;
		background-color: #fff;
		color: rgba(0, 0, 0, 0.55);

		>view {
			font-size: 28rpx;
			line-height: 1.5;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
	}

	.menuContent {
		padding: 40rpx;
		background-color: #fff;
		margin-top: 20rpx;

		>view {
			@include flex(space-between, center);
			font-size: 30rpx;
			line-height: 2;
			margin-bottom: 20rpx;
			background-color: #f5f5f5;
			padding: 15rpx 20rpx;
		}

		>.menuTop {
			// color: rgba(0, 0, 0, 0.55);
			color: #000;
			font-weight: bold
		}

		.total {
			@include flex(flex-end, center);
			background-color: #fff;
			padding-right: 0;
			color: rgba(0, 0, 0, 0.55);

			text {
				color: #000;
				margin-left: 10rpx;
			}
		}
	}

	.storeState {
		padding: 40rpx;
		background-color: #fff;
		margin-top: 20rpx;
		@include flex(space-between, center);
		flex-wrap: wrap;

		.title {
			font-size: 30rpx;
			line-height: 2;
			font-weight: bold;

			text {
				margin-left: 10rpx;
				font-weight: 100;
			}

			.error {
				color: red;
				font-weight: bold;
			}

			.ing {
				color: #6ABCEB;
			}

			.success {
				color: #7CCF85;
			}
		}


		>view:nth-child(2) {
			width: 28%;
			border-radius: 100rpx;
			// border: 1px solid #F1B825;
			// color: #F1B825;
			background-color: #FA690A;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			line-height: 2;
			padding: 5rpx 0;
			position: relative;

			.num {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: #FD2A2A;
				font-size: 24rpx;
				line-height: 30rpx;
				color: #fff;
				text-align: center;
			}
		}

	}


	.orderContent {
		margin-top: 20rpx;

		.tableBox {
			overflow: hidden;
			overflow-x: scroll;
			background-color: #fff;
			padding: 20rpx 0;
		}

		.table {
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			flex-direction: column;


			scroll-view {
				width: 1000px !important
			}

			.tr {
				display: flex;
				border: 1px solid #eee;
				border-bottom: 0;
				color: #000;
				max-height: 150rpx;

				&:nth-child(1) {
					background-color: #ccc;
					border: 0;

					.td {
						color: #000;
					}
				}

				&:last-child {
					border-bottom: 1px solid #eee;
				}

				.td {
					padding: 10rpx;
					font-size: 28rpx;
					width: 100rpx;
					text-align: center;
					flex-shrink: 0;
					line-height: 1.5;

					&:first-child {
						width: 50rpx
					}

					&:last-child {
						// width: 360rpx
					}

					&:nth-child(4) {
						text-align: left;
					}

					.error {
						color: red;
						font-weight: bold;
						font-size: 32rpx;
					}

					&:last-child {
						width: 200rpx
					}
				}
			}
		}

		.allCheck {
			@include flex();
			font-size: 28rpx;
			line-height: 2;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			padding: 10rpx 40rpx;

			uni-checkbox {
				margin-right: 10rpx;
			}
		}

		.orderList {
			@include flex(flex-start, flex-start);
			font-size: 28rpx;
			line-height: 2;
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 40rpx;

			uni-checkbox {
				margin-right: 10rpx;
			}

			>view {
				@include flex(flex-start, flex-start);
				flex-direction: column;
				width: 100%;
				flex-wrap: wrap;

				>view {
					width: 100%;
					@include flex();
					flex-wrap: wrap;
					color: rgba(0, 0, 0, 0.55);

					text {
						color: #000;
						margin: 0 20rpx;
					}

				}

				>.foods {
					>.det {
						margin-left: 20rpx;

						text {
							margin-left: 0;
							margin-right: 4rpx;
						}

						.error {
							color: red;
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}

				>.w30 {
					>view {
						width: calc(100% / 3);
					}
				}

				>.w10 {
					@include flex(flex-start, flex-start);

					>view:nth-child(2) {
						@include flex();
						flex-wrap: wrap;

						>view {
							width: 50%;
							color: #000;
							padding-left: 10rpx;
						}
					}
				}

				>.w50 {
					.note {
						font-size: 32rpx;
						line-height: 2;
					}

					>view {
						// width: 50%;
					}
				}
			}


		}
	}
</style>
<style lang="scss">
	.storeBox {
		/deep/.uni-checkbox-input {
			border-radius: 50%;
			width: 35rpx;
			height: 35rpx;
			// border-color: #FA690A !important;
		}

		/deep/.uni-checkbox-input-checked {
			color: #FA690A !important;
			border: 1px solid #FA690A !important;
		}
	}
</style>
